<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<!--创建一个div，id是app-->
    <div id="app" @mousemove="xy">
        x轴:{{x}},
        y轴:{{y}},
        <br>
        {{title}},{{sex}},{{age}},{{flag}},{{rich}}
        <br>
        {{myHello()}}

        <p v-if="flag">
            这个p标签经过判断值为true
        </p>

        <p v-else-if="rich">
            这个p标签经过判断rich属性的值为true
        </p>

        <p v-else="rich">
            这个p标签经过判断rich属性的值为false
        </p>

        <p v-show="flag">
            使用show判断显示语法，flag的值为true
        </p>

<!--    遍历数组第一种方法-->
        <ul>
<!--            遍历属性名为args的集合，每遍历一次拿出一个元素，放入a变量中-->
            <li v-for="a in args">{{a}}</li>
        </ul>

<!--    遍历数组的第二种方法-->
        <ul>
        <!--
            遍历属性名为args的集合，每遍历一次拿出一个元素，放入a变量中
            i:数组的索引号，   :key 去索引号，赋值给i
        -->
            <li v-for="(a,i) in args" :key="i">{{i}}====={{a}}</li>
        </ul>
<!--    遍历对象的第三种方法-->
        <!--
            遍历stu对象，每次获取一个属性，
            属性值赋值给v,
            属性名赋值给k,
            索引号赋值给i
         -->
        <ul>
            <li v-for="(v,k,i) in stu">{{v}}==={{k}}==={{i}}</li>
        </ul>

         <!--演示v-model双向绑定-->
        <input type="text" v-model="title"/>
        显示绑定的数据：{{title}}
        <br>
        <!--演示v-bind：绑定html标签的原有属性-->
        <a :href="jd">跳转到京东</a>
        <br>
        <!--事件绑定-->
        <button type="button" v-on:click="myAdd(1)">累加</button>
        显示累加数据：{{sum}}
        <br>
<!--        事件绑定，获取x、y轴的鼠标的当前位置的坐标-->
        <p @mousemove="xy">
            x轴:{{x}}
            y轴:{{y}}
        </p>
    </div>

    <script type="text/javascript">
        //创建一个vue对象
        new Vue({
            el:"#app",//绑定ID为app的页面元素
            data:{      //定义vue对象属性数据
                sum:0,
                x:0,
                y:0,
                title:"张三",
                sex:"男",
                age:18,
                flag:true,
                rich:false,
                args:[1,2,3,4,5,6,7,8,9],
                stu:{
                    name:"饕鬄",
                    sex:"男",
                    age:2000
                },

                jd:"http://www.jd.com"
            },

            //定义方法，myHello是定义的方法名
            methods:{
                myHello:function () {
                    return "hello world"
                },
                myAdd:function (s) {
                    this.sum+=s
                },
                xy:function (event) {
                    //获取x轴坐标
                    this.x=event.clientX;
                    //获取y轴坐标
                    this.y=event.clientY;
                }
            }
        });
    </script>


</body>
</html>